<template>
  <div>
    <div class="setlement-goods-details-item">
      <table>
        <tbody>
          <tr>
            <td>
              <span>{{ count }}</span
              >件商品,商品总金额：
            </td>
            <td>
              ￥<span>{{ price }}</span>
            </td>
          </tr>
          <tr>
            <td>运费：</td>
            <td>
              <span>￥{{ freight }}</span>
            </td>
          </tr>
          <tr>
            <td>应付金额：</td>
            <td>
              ￥<span>{{ payment }}</span>
            </td>
          </tr>
        </tbody>
        <tbody></tbody>
      </table>
    </div>
    <div class="setlement-goods-button">
      <router-link to="../cart"
        ><button type="button" style="width: 300px; height: 50px">
          返回购物车
        </button></router-link
      >
      <button
        type="button"
        style="width: 300px; height: 50px"
        class="red"
        @click="pay"
      >
        立即结算
      </button>
    </div>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "OrderPrice",
  data() {
    return {
      datas: [],
      count: 0,
      price: 0,
      payment: 0,
      freight: 0,
      address: [],
    };
  },
  props: {
    resultss: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    resultss: {
      deep: true,
      handler: function (newV, oldV) {
        this.datas = newV;
        this.count = 0
        this.price = 0
        this.datas.forEach((item) => {
          this.count += item.orders_goods_count;
          this.price += item.orders_goods_price * item.orders_goods_count;
          this.payment = this.price + this.freight;
        });
      },
    },
  },
  mounted() {
    this.$bus.$on("address", (res) => {
      this.address = res;
    });
  },
  methods: {
    pay() {
      if (this.address.length == 0) {
        // alert("请选择地址");
          this.$alert('请选择地址', '提示', {
          confirmButtonText: '确定',
        });
      } else {
        this.$axios
          .get("/api/users/pay", {
            params: {
              orders: { ...this.datas },
            },
          })
          .then((res) => {
            location.replace(res.data.data);
          })
      }
    },
  },
};
</script>

<style scoped>
* {
  list-style: none;
}
.setlement-goods-details-item {
  border-bottom: none;
  margin-right: 70px;
}
.setlement-goods-details-item table {
  border-color: transparent;
  float: right;
  text-align: right;
  border-collapse: collapse;
  border-spacing: 0;
  border-bottom: 1px solid #ababab;
}
.setlement-goods-details-item td {
  border-color: transparent;
  padding: 5px 0;
}
tr {
  border-color: transparent;
}
.setlement-goods-button {
  padding: 30px 30px;
  clear: both;
  float: right;
}
.red {
  background-color: #000;
  border: 1px solid #999;
  color: #fff;
  margin-left: 20px;
}
.red:hover {
  color: #ccc;
}
.modal-body p {
  padding: 20px 0px 10px;
}
.change {
  background-color: #fff;
  border: 1px solid black;
  margin-left: 10px;
}
.ctext {
  width: 400px;
  height: 30px;
  border-bottom: 1px solid black;
}
</style>